<template>
  <div class="game">
    <el-scrollbar>
      <div class="game-list">
        <GameItem
          v-for="(game, key) in games" :key="key"
          :game="game" :task="task"
          :active="key == gameId" :bctype="key"
          @click="handleClick(key, game)"
        />
      </div>

      <el-scrollbar v-if="game">
        <ReservationOrder v-if="store.task.taskType == '_reservation_order'" :game="game" />
        <Order v-else :game="game" />
      </el-scrollbar>
    </el-scrollbar>
    
    
  </div>
</template>
<script setup>
import { sendRepairTask } from '@/api/repair'

import GameItem from './GameItem.vue'
import Order from './Order.vue'
import ReservationOrder from './ReservationOrder.vue'

const gameId = defineModel({ type: Number })
const props = defineProps({
  games: Object,
  task: Object,
})

const { store } = inject('/home')

const handleClick = (key, item) => {
  setTimeout(() => {
    console.log(game.value);
  }, 1000);
  
  if (gameId.value == key) {
    gameId.value = null
    return
  }
  gameId.value = key

  const { task } = props

  // sendRepairTask({
  //   bc_type: key,
  //   ids: item.ids,
  //   main_task_code: task.task_code,
  //   main_task_name: task.task_name,
  //   pk_odds_key: item.pk_odds_key,
  // })
}

const game = computed(() => {
  return props?.games[gameId.value]
})
</script>
<style lang="scss" scoped>
.game {
  width: 100%;
  overflow: hidden;
}

.game-list {
  display: flex;
}
</style>
